<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.feightTemplateName" placeholder="请输入模版名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button type="warning" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="btn-list">
        <el-button @click="addTemplate">新建模版</el-button>
      </div>

      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column property="id" label="ID"></el-table-column>
        <el-table-column property="feightTemplateName" label="模版名称"></el-table-column>
        <el-table-column property="chargingType" label="计费方式">
          <template #default="scope">
            {{ scope.row.chargingType === null ? '无' : chargingTypeDatas.find((item) => item.value === scope.row.chargingType).label }}
          </template>
        </el-table-column>
        <el-table-column property="parcelType" label="包邮方式" >
          <template #default="scope">
            {{ parcelTypeDatas.find((item) => item.value === scope.row.parcelType).label }}
          </template>
        </el-table-column>
        <el-table-column property="sort" label="排序" />
        <el-table-column property="createTime" label="创建日期" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">
              修改
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]"
        size="default"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <feight-template ref="feightTemplateRef" @refreshDataList="onQuery"></feight-template>
    </el-card>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import { ElTable, ElMessageBox } from 'element-plus'
  import { showMessage } from '~/utils/my-notification'
  import { tableList, batchRemove } from '~/api/delivery/feight.js'
  import feightTemplate from './feight-template.vue'

  const currentPage = ref(1)
  const pageSize = ref(20)
  const background = ref(false)
  const disabled = ref(false)
  const total = ref(0)
  const tableData = ref([])
  const feightTemplateRef = ref(null)
  const parcelTypeDatas = [
    { value: 0, label: '全国包邮'},
    { value: 1, label: '部分包邮'},
    { value: 2, label: '自定义'}
  ]
  const chargingTypeDatas = [
    { value: 0, label: '按件数'},
    { value: 1, label: '按重量'},
    { value: 2, label: '按体积'}
  ]

  const formInline = reactive({
    feightTemplateName: '',
    page: currentPage.value,
    limit: pageSize.value
  })

  onQuery();
  // 查询按钮
  function onQuery() {
    tableList(formInline).then(res => {
      if(res && res.data.code === 200) {
        const datas = res.data.data.records
        tableData.value = datas
        total.value = res.data.data.total
      }
    })
  }
  // 重置按钮
  function onReset() {
    formInline.feightTemplateName = ''
  }
  // 新建模版按钮
  function addTemplate() {
    if(feightTemplateRef.value) {
      feightTemplateRef.value.init()
    }
  }
  // 修改按钮
  function handleEdit(row) {
    if(feightTemplateRef.value) {
      feightTemplateRef.value.init(row.id)
    }
  }
  // 删除按钮
  function handleDelete(row) {
    ElMessageBox.confirm(`确定执行删除操作?`, '提示',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false
    }).then(() => {
      let ids = [row.id]
      batchRemove(ids).then(res => {
        if(res && res.data.code === 200) {
          showMessage('删除成功!')
          onQuery()
        } else {
          showMessage('删除失败!', 'error')
        }
      }).catch(err => {
        showMessage('删除失败!', 'error')
      })
    }).catch(() => {

    })
  }

  const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
  }
  const handleCurrentChange = (val) => {
    currentPage.value = val
    onQuery()
  }
</script>
<style>
  .el-pagination {
    margin-top: 20px;
    margin-bottom: 20px;
    float: right;
  }

  .btn-list {
    margin-bottom: 20px;
  }
</style>